<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业2布局切换</title>
    <script src="js/vue.js"></script>
    <style>
        #box{
            width: 600px;
            margin: 0 auto;
        }
        .nav{
            width: 600px;
            height: 50px;
            background-color: #5a9bb7;
            position: relative;
        }
        .large{
            display: inline-block;
            width: 30px;
            height: 30px;
            background: rgba(0,0, 0, .5) url(./images/lefticon.png)center center no-repeat;
            position: absolute;
            top: 10px;
            right: 60px;
            cursor: pointer;
        }
        .small{
            display: inline-block;
            width: 30px;
            height: 30px;
            background: rgba(0,0, 0, .5) url(./images/righticon.png)center center no-repeat;
            position: absolute;
            top: 10px;
            right: 20px;
            cursor: pointer;
        }
        .active{
            background-color: #bc4b93;
        }
        .content{
            width: 600px;
        }
        ul{
            padding: 0;
            width: 600px;
            list-style: none;
        }
        li.first{
            width: 300px;
            height: 250px;
            float: left;
        }
        li.first>img{
            width: 280px;
            height: 250px;
            margin-left: 20px;
        }
        li.scode>img{
            width: 250px;
            height: 250px;
            margin-left: 20px;
            float: left;
        }
        .scode{
            width:600px ;
            height: 250px;
            margin-top: 10px;
           border-bottom: 1px solid #ccc;
           padding-bottom: 10px;
        }
        li.scode>span{
            display: block;
            width: 320px;
            height: 250px;
            float: left;
        }
    </style>
</head>
<body>
        <div id="box">
            <nav class="nav">
                <span v-bind:class="{active:show}" @click="showL()" class="large"></span>
                <span v-bind:class="{active:!show}" @click="showS()" v-bind:class="{active:show}" class="small"></span></nav>
            <div class="content">
                <ul>
                    <li v-for="(item,index) in arr" v-show="show" class="first" >
                        <img v-bind:src="item.image.large" />
                    </li>
                    <li v-for="(item,index) in arr" class="scode" v-show="!show">
                        <img v-bind:src="item.image.small" />
                        <span>{{item.title}}</span>
                    </li>
                </ul>
            </div>
        </div>
    <script>
        var vm=new Vue({
            el:"#box",
            data:{
                arr:[
                {
                "title": "儿童社交的爱与痛（套装全2册）",
                "url": "http://product.dangdang.com/25189806.html",
                "image": {
                    "large": "http://img3m6.ddimg.cn/48/21/25189806-1_w_7.jpg",
                    "small": "http://img3m6.ddimg.cn/48/21/25189806-1_w_7.jpg"
                }
               
            },
            {
                "title": "刘墉口才大师经典套装(畅销30年超值珍藏版)",
                "url": "http://product.dangdang.com/23995236.html",
                "image": {
                    "large": "http://img3m6.ddimg.cn/12/33/23995236-1_w_6.jpg",
                    "small": "http://img3m6.ddimg.cn/12/33/23995236-1_w_6.jpg"
                }
            },
            {
                "title": "丹·布朗作品系列：本源",
                "url": "http://product.dangdang.com/25253662.html",
                "image": {
                    "large": "http://img3m2.ddimg.cn/49/15/25253662-1_w_3.jpg",
                    "small": "http://img3m2.ddimg.cn/49/15/25253662-1_l_3.jpg"
                }
            },
            {
                "title": "高兴死了!!!（我正在人生低谷，我现在高兴死了！）",
                "url": "http://product.dangdang.com/25245058.html",
                "image": {
                    "large": "http://img3m8.ddimg.cn/58/32/25245058-1_w_4.jpg",
                    "small": "http://img3m8.ddimg.cn/58/32/25245058-1_l_4.jpg"
                }
            },
            {
                "title": "谈判：如何在博弈中获得更多(第四版)Everything is Negotiable",
                "url": "http://product.dangdang.com/25247638.html",
                "image": {
                    "large": "http://img3m8.ddimg.cn/64/22/25247638-1_l_1.jpg",
                    "small": "http://img3m8.ddimg.cn/64/22/25247638-1_l_1.jpg"
                }
            },
            {
                "title": "好想去这样那样的国家（全6册）",
                "url": "http://product.dangdang.com/25261269.html",
                "image": {
                    "large": "http://img3m9.ddimg.cn/33/0/25261269-1_l_3.jpg",
                    "small": "http://img3m9.ddimg.cn/33/0/25261269-1_l_3.jpg"
                }
            }
                ],
                show:"true"
            },
            methods:{
                showL(){
                  if(!this.show){
                      this.show=true;
                  }else{
                    this.show=false;
                  }
                },
                showS(){
                    if(this.show){
                      this.show=false;
                  }else{
                    this.show=true;
                  }
                }
            }
          
        })
    </script>
</body>
</html>